<template>
  <fieldset>
    <legend>List组件</legend>

    <ul>
      <li v-for="(item,index) in arr"
          :key="index">{{item}}</li>
    </ul>
  </fieldset>
</template>
<script>

  //子传父的流程

  //1.首先,子传父是通过vue的事件机制来实现的,需要主动调用$emit进行触发,$emit("自定义的事件函数","要传递的参数")
  //2.在子组件的标签上,通过v-on绑定通过$emit发射的自定义事件,处理函父组件的methods中
  //3.在父组件的mehtods中,通过形参接收子组件传递的数据

  export default {
    data() {
      return {
        arr: ["吃饭", "睡觉", '打豆豆']
      }
    },
    mounted() { //组件挂载之后,这是一个钩子函数
      //bus的on方法
      // let _this = this;
      this.$bus.$on("add-todo", input => {
        // console.log(input);
        // console.log(this);
        this.arr.push(input)

        //发射一个事件,清空Input组件输入框的值
        this.$bus.$emit("clear")
      })

    },
    props: ['data'] //props传下来的值是个只读属性,不要去修改
  }
</script>